<template>
  <Wmodule title="气象站信息" class="m2">
    <div class="hj-qx-list">
      <div class="hj-qx-item" v-for="(item, index) in hjData" :key="index">
        <div class="hj-qx-item-icon">
          <img :src="item.icon" alt="" class="icon" />
        </div>
        <div class="hj-qx-item-name">
          {{ item.name }}
        </div>
        <div class="hj-qx-item-value">
          {{ item.value || '--' }}
          <span v-if="item.unit" class="unit">{{ item.unit }}</span>
        </div>
      </div>
    </div>
  </Wmodule>
</template>
<script setup>
import { ref, watch, toRaw } from 'vue'
import Wmodule from '@/components/wmodule/index.vue'
import imgUrl6 from '@/assets/img/6.png'
import imgUrl7 from '@/assets/img/7.png'
import imgUrl8 from '@/assets/img/8.png'
import imgUrl9 from '@/assets/img/9.png'
import imgUrl10 from '@/assets/img/10.png'
import imgUrl11 from '@/assets/img/11.png'

const props = defineProps({
  data: {
    type: Array,
    default: () => []
  }
})

const hjDataOptions = [
  {
    name: '温度',
    value: '',
    unit: 'C°',
    icon: imgUrl11
  },
  {
    name: '湿度',
    value: '',
    unit: '%',
    icon: imgUrl10
  },
  {
    name: '风向',
    value: '',
    icon: imgUrl8
  },
  {
    name: '风速',
    value: '',
    unit: 'm/s',
    icon: imgUrl7
  },
  {
    name: '大气压',
    value: '',
    unit: 'kpa',
    icon: imgUrl6
  },
  {
    name: '降雨量',
    value: '',
    unit: 'mm',
    icon: imgUrl9
  }
]

const hjData = ref(hjDataOptions)

watch(
  () => props.data,
  (newVal) => {
    const _newVal = toRaw(newVal)
    const _hjData = hjDataOptions.map((item) => {
      const row = _newVal.find((item2) => item2.deviceItemName === item.name)
      if (row) {
        const _metData = row.metData || row.soilData || {}
        if (item.name === '湿度') {
          return {
            ...item,
            value: _metData.humValueStr,
            unit: _metData.humUnit
          }
        }
        return {
          ...item,
          value: _metData.temValueStr,
          unit: item.name != '风向' ? _metData.temUnit : ''
        }
      } else {
        return item
      }
    })
    hjData.value = _hjData
  }
)
</script>
<style lang="scss" scoped>
.m2 {
  height: 100%;
}
.hj-qx-list {
  margin-top: 20px;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 40px 40px 40px;
  grid-gap: 22px 38px;
  .hj-qx-item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background: url('@/assets/img/45.png') no-repeat;
    background-size: calc(100% - 20px) 100%;
    background-position: 20px 0px;
    padding-right: 10px;
    box-sizing: border-box;
    gap: 10px;
    .hj-qx-item-icon {
      display: flex;
      justify-content: center;
      align-items: center;
      .icon {
        // width: 100%;
        // height: 100%;
        width: 40px;
        height: 40px;
      }
    }
    .hj-qx-item-name {
      font-family: Microsoft YaHei;
      font-weight: 600;
      font-size: 12px;
      color: #e7ffec;
      line-height: 20px;
      flex: 1;
    }
    .hj-qx-item-value {
      font-family: Microsoft YaHei;
      font-weight: 600;
      font-size: 12px;
      color: #e7ffec;
      line-height: 20px;
    }
  }
}
</style>
